iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 27
0
Modern Web

網頁技術學習心得系列 第 27

Webpack 筆記三(webpack loader dev server)

  • 分享至 

  • xImage
  •  

dev server 利用 source-map 可以更好的 debug

如果我在程式碼裡面加入一個 Error:

import css from './style.sass';
import { utilis } from './utilis.js'
import $ from 'jquery'

// const utilis = require('./utilis.js');
// const $ = require('jquery')
// console.log(utilis.first('rockwang'))


$('document').ready(() => {
    const str = 'Hello!'
    
    $('.btn').click(() => alert(str))
    throw new Error('yoyoyo') // Error
})

我在 Chrome 上 DevTool

查找出來的程式碼會與我一原始的有些落差,造成比較不好 debug。

這時,在 webpack.config.js 加入一段 devtool: 'inline-source-map',,就可以得到一個原始碼的程式。


上一篇
Webpack 筆記二(webpack 設定檔)
下一篇
JavaScript 進階筆記一 (變數)
系列文
網頁技術學習心得30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言